<template>
  <div class="container">
    <Breadcrumb
      :items="['menu.question-management', 'menu.question-management.title']"
    />
    <a-spin :loading="loading" style="width: 100%">
      <a-card class="general-card">
        <template #title>
          {{ $t('stepForm.step.title') }}
        </template>
        <div class="wrapper">
          <a-steps
            v-model:current="step"
            class="steps"
            line-less
            style="width: 580px"
          >
            <a-step :description="$t('stepForm.step.subTitle.baseInfo')">
              {{ $t('stepForm.step.title.baseInfo') }}
            </a-step>
            <a-step :description="$t('stepForm.step.subTitle.channel')">
              {{ $t('stepForm.step.title.channel') }}
            </a-step>
            <a-step :description="$t('stepForm.step.subTitle.finish')">
              {{ $t('stepForm.step.title.finish') }}
            </a-step>
          </a-steps>
          <keep-alive>
            <ChooseQuestionType
                v-if="step === 1"
                @changquestiontype="changquestiontype"
            />
            <!-- && questionType === -->

            <!--这是选择题-->
            <ChoiceQuestion
              v-else-if="step === 2 && questionType === 1"
              @func="getMsgFormSon"
              @change-step="changeStep"
            />

            <!--这是填空题-->
            <CompletionQuestion
              v-else-if="step === 2 && questionType === 2"
              @func="getMsgFormSon"
              @change-step="changeStep"
            />

            <!--这是简答题-->
            <ShortAnswerQuestion
              v-else-if="step === 2 && questionType === 3"
              @func="getMsgFormSon"
              @change-step="changeStep"
            />

            <Success v-else-if="step === 3" @change-step="changeStep" />
          </keep-alive>
        </div>
      </a-card>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import {
    BaseInfoModel,
    ChannelInfoModel,
    submitChannelForm,
    UnitChannelModel,
  } from '@/api/form';
  import Success from './components/success.vue';
  import ShortAnswerQuestion from './components/short-answer-question.vue';
  import CompletionQuestion from './components/completion-question.vue';
  import ChoiceQuestion from './components/choice-question.vue';
  import ChooseQuestionType from "./components/choose-question-type.vue";

  const { loading, setLoading } = useLoading(false);
  const step = ref(1);

  // 确定是哪个类型的题目
  const questionType = ref(1);

  const submitModel = ref<UnitChannelModel>({} as UnitChannelModel);

  // 接收选择类型
  const getMsgFormSon = (data: any) => {
    console.log(data);
  };

  const submitForm = async () => {
    setLoading(true);
    try {
      await submitChannelForm(submitModel.value); // The mock api default success

      step.value = 3;
      submitModel.value = {} as UnitChannelModel; // init
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };

  const changquestiontype = (arg1:number,arg2:number) => {
    step.value=arg1;
    questionType.value=arg2;
  }

  const changeStep = (
    direction: string | number,
    model: BaseInfoModel | ChannelInfoModel
  ) => {
    if (typeof direction === 'number') {
      // console.log('---------')
      // console.log(step)
      step.value = direction;
      // console.log('---------')
      // console.log(step)
      return;
    }

    if (direction === 'forward' || direction === 'submit') {
      submitModel.value = {
        ...submitModel.value,
        ...model,
      };
      console.log('---------');
      console.log(step);
      if (direction === 'submit') {
        console.log('---------');
        console.log(step);
        submitForm();
        return;
      }
      step.value += 1;
    } else if (direction === 'backward') {
      step.value -= 1;
    }
  };
</script>

<script lang="ts">
  export default {
    name: 'Step',
  };
</script>

<style lang="less" scoped>
  .container {
    padding: 0 20px 20px 20px;
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0;
    background-color: var(--color-bg-2);

    :deep(.arco-form) {
      .arco-form-item {
        &:last-child {
          margin-top: 20px;
        }
      }
    }
  }

  .steps {
    margin-bottom: 76px;
  }

  .form-css {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
  }

  .a-form-css {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sub-css {
    align-items: center;

    /* display: flex; */
    justify-content: center;
  }
</style>
